<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <Header />
    </div>
    <div class="body">
      <!-- 左侧菜单 -->
      <div class="body-left">
        <Menu />
      </div>
      <!-- 主体部分 -->
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import Header from './components/header.vue'
import Menu from './components/menu.vue'
const router = useRouter()
</script>
<style scoped lang="less">
.home {
  width: 100vw;
  height: 100vh;
  .header {
    height: 60px;
    background-color: #001529;
    border-bottom: 1px solid rgba(69, 98, 155, 0.12);
    // background-color: @main-color !important;
  }
  .body {
    display: flex;
    .body-left {
      height: calc(100vh - 60px);
      // background-color: #001529;
      width: 200px;
    }
    .content {
      overflow: scroll;
      background-color: white;
      height: calc(100vh - 60px);
      width: calc(100vw - 200px);
      padding: 10px 10px;
    }
  }
}
</style>
